<template>
    <div class="card">

        <div class="card-header d-flex bg-white">
            <span class="flex-fill">关键词设置</span>
            <span class="">关键词已经被使用时将会忽略</span>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label>规则名称</label>
                <input type="text" class="form-control" v-model="rule.title" :required="required">
            </div>
            <chat-list :wechat.sync="rule.wechat_id"></chat-list>
            <ul class="nav nav-tabs " id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"
                       @click="model=false">完整匹配</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" @click="model=true">模糊匹配</a>
                </li>
            </ul>
            <div class="tab-content border border-top-0 p-3" id="myTabContent">
                <div class="tab-pane fade show active" id="home">
                    <div class="input-group mb-3" v-for="(keyword,index) in keywords" :key="index"
                         v-show="!keyword.regexp">
                        <input type="text" class="form-control" :class="{'border-danger':keyword.has}"
                               v-model="keyword.word"
                               @blur="checkKeyword(keyword)"
                        >
                        <div class="input-group-append">
                            <a href="#" class="input-group-text" id="basic-addon2" @click.prevent="del(index)">删除</a>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="input-group mb-3" v-for="(keyword,index) in keywords" :key="index"
                         v-show="keyword.regexp">
                        <input type="text" class="form-control" :class="{'border-danger':keyword.has}"
                               v-model="keyword.word"
                               @blur="checkKeyword(keyword)"
                        >
                        <div class="input-group-append">
                            <a href="#" class="input-group-text" @click.prevent="del(index)">删除</a>
                        </div>
                    </div>
                </div>

            </div>
            <textarea name="wechat[keywords]" v-html="keywords" hidden></textarea>
            <textarea name="wechat[rule]" v-html="rule" hidden></textarea>
            <button class="btn btn-outline-primary mt-2" @click.prevent="add()">添加关键字</button>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            rid: {type: Number, default: 0},
            required: {type: Boolean, default: true},
        },
        data() {
            return {
                rule: window.rule || {title: '', wechat_id: 0},
                model: false,
                keywords: window.keywords || [],
                wechats: []

            }
        },
        mounted() {
            this.getWechats()
            this.getRule()
        },

        methods: {
            async checkKeyword(keyword) {
                //没有loading过度动画的axios
                const response = await this.uaxios.post('wechat/keyword/check', {keyword});
                //
                this.$set(keyword, 'has', response.has);

                if (response.has) {
                    this.$message.error(`关键词${keyword.word}已经被使用`)
                }

            },
            async getRule() {

                if (!this.rid) return;
                const response = await this.axios(`wechat/rule/${this.rid}`);

                this.rule = response.rule;
                this.keywords = response.keywords;

            },
            async getWechats() {
                this.wechats = await this.axios.get(`wechat/rule/wechat`);
            },
            add() {
                this.keywords.push({'word': '', 'regexp': this.model})
            },
            del(index) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.keywords.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }

</script>
<style lang="scss">

</style>
